<template>
	<hyb-page title="会员购买">
		<template v-slot:body>
			<view v-for="(item,index) in list" :key="index"
				class="gui-bg-white gui-padding gui-margin-x gui-border-b gui-margin-top">
				<view class="gui-list-items">
					
					<view class="gui-list-image gui-relative">
						<image class="gui-list-image" mode="aspectFill" :src="base.erweima">
						</image>
					</view>
					<view class="gui-list-body gui-border-b gui-margin-x">
					
						<view class="gui-list-title">
							<text class="gui-list-title-text gui-primary-text">入驻时间：{{item.r_time}}天</text>
							<text
								class="gui-list-title-text gui-color-red gui-margin-x gui-bold">￥{{item.r_money}}</text>
						</view>
						<text class="gui-list-body-desc gui-color-gray gui-margin-top">{{item.shuo_ming}}</text>
					</view>

					<gui-radio @change="checkType(index)" :checked="checkedIndex == index"
						:defaultClass="['gui-color-gray']" :checkedClass="['gui-bg-red', 'gui-color-white']">
					</gui-radio>
				</view>
			</view>
			<!-- <hyb-empty v-if="list.length==0"></hyb-empty> -->
			<hyb-pay v-if="money>0" :money="money" @confirm="confirm"></hyb-pay>
		</template>

	</hyb-page>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				checkedIndex: 0,
				money: 0,
			}
		},

		computed: {
			base: () => {
				return uni.storage.get("base")
			}
		},

		onLoad(options) {
			this.query();
		},


		methods: {
			checkType(index) {
				this.checkedIndex = index;
				this.money = this.list[index].r_money;
			},

			confirm(pay_type) {
				uni.$pay.pay("pay/ruzhu1", {
					r_id: this.list[this.checkedIndex].r_id,
				}, pay_type).then(() => {
					uni.redirectTo({
						url: "/hyb_o2o/shangjia/index/index"
					})
				}).catch((e) => {
					console.log(e)
				})
			},

			query() {
				uni.gPost("shangjia/ruzhu/list").then((list) => {
					this.list = list
					this.money = this.list[this.checkedIndex].r_money;
				})
			}
		}
	}
</script>

<style>
	/* 自定义吸顶元素样式 */
	.fixed-top-view {
		height: 100rpx;
	}

	.graceSelectMenuItem {
		width: 180rpx;
	}

	.price-input {
		width: 120rpx;
		padding: 10rpx 0;
		border-radius: 5rpx;
		text-align: center;
	}

	.right-area-footer {
		width: 580rpx;
		height: 100rpx;
	}

	.right-area-footer-btn {
		width: 290rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 28rpx;
		text-align: center;
	}

	.gui-list-image {
		height: 140rpx;
		width: 140rpx;
	}
</style>
